<template>
    <div class="home-header">
        <div class="gohome" @click="goHomeHandle">HOME</div>
        <div class="login-btn">
            <div v-if="!userInfo" class="login" @click="loginHandle">登录</div>
            <template v-else>
                <user-name />
            </template>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import userName from './userName/userName.vue'
export default {
    computed: {
        ...mapGetters(['userInfo'])
    },
    components: { userName },
    methods: {
        loginHandle() {
            this.$router.push('/login')
        },
        goHomeHandle(){
            this.$router.push('/')
        }
    }
}
</script>
<style lang="scss">
.home-header {
    height: 60px;
    box-shadow: 0px 0px 9px 0px rgba(35, 52, 93, 0.08);
    position: relative;
    .gohome{
        position: absolute;
        top: 0;
        left: 10px;
        bottom: 0;
        font-size: 20px;
        line-height: 60px;
        color: #aaa;
        font-weight: bold;
        cursor: pointer;
    }
    .login-btn {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        .login {
            width: 100px;
            background: #3370ff;
            line-height: 60px;
            text-align: center;
            font-size: 13px;
            color: #fff;
        }
    }
}
</style>